<template>
  <div class="add-second-wrap">
    <step />
    <!-- <el-row class="item-container">
      <div class="title-wrap1">
        <div class="title">随时退：</div>
        <el-select v-model="info.able_return" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-row> -->
    <el-row class="item-container">
      <div class="title">有效时间：</div>
      <el-date-picker v-model="info.date" type="daterange" style="width: 420px" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
    </el-row>
    <el-row class="item-container">
      <div class="title">使用规则：</div>
      <el-input v-model="info.use_rule" type="textarea" placeholder="请输入使用规则" class="textarea-container" />
    </el-row>
    <el-row class="item-container">
      <div class="title">预定说明：</div>
      <el-input v-model="info.refund_rule" type="textarea" placeholder="请输入预定说明" class="textarea-container" />
    </el-row>
    <el-row style="width: 100%" class="item">
      <div style="margin-bottom: 20px" class="title">内容：</div>
      <div style="width: 70%;margin-left: 100px" class="tinymce">
        <tinymce ref="editor" v-model="info.content" :height="300" />
      </div>
    </el-row>
    <el-row class="item-container right">
      <el-button type="primary" class="add-btn" @click="handleSubmit">完成</el-button>
    </el-row>
  </div>
</template>
<script>
import Step from '@/components/step'
import Tinymce from '@/components/Tinymce'
import { addHotel, editType } from '@/api/combo'
import { deepClone } from '@/utils/index.js'
export default {
  name: 'CateSecond',
  components: {
    Step,
    Tinymce
  },
  data() {
    return {
      info: {
        able_return: '支持',
        use_rule: '',
        refund_rule: '',
        date: '',
        content: '',
        start_date: '',
        end_date: ''
      },
      options: [
        {
          label: '0',
          value: '不支持'
        },
        {
          label: '1',
          value: '支持'
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const info = JSON.parse(this.$route.query.info)
      if (!info) {
        this.$router.push('/merchandise/combo/cate')
      } else {
        if (!Array.isArray(info.package_pics)) {
          info.package_pics = [info.package_pics]
        }
        if (info.id) {
          info.able_return = Number(info.able_return) === 1 ? '支持' : '不支持'
          info.date = [info.start_date, info.end_date]
          this.info = info
        } else {
          this.info = Object.assign({}, this.info, { ...info })
        }
      }
    },
    // 提交
    handleSubmit() {
      this.validity()
    },
    // 改变上传格式
    validity() {
      const info = deepClone(this.info)
      info.package_id = info.id || 0
      info.able_return = info.able_return === '支持' ? 1 : 0
      info.start_date = this.validityDate(info.date)
      info.end_date = this.validityDate(info.date, 1)
      info.package_pics = this.validityPics(info.package_pics)
      if (!info.start_date || !info.end_date) { return }
      info.id ? this.edit(info) : this.add(info)
    },
    // 改变有效时间，结束时间
    validityDate(array, num = 0) {
      if (!Array.isArray(array)) {
        this.$message.warning({
          message: '有效时间不能为空',
          duration: 1000
        })
        return false
      } else {
        return array[num]
      }
    },
    // 改变轮播图
    validityPics(array) {
      return array.join('|')
    },
    // 编辑
    async edit(info) {
      await editType({ ...info })
      this.$message.success({
        message: '编辑成功',
        duration: 1000
      })
      this.$router.push({
        path: '/merchandise/combo/other'
      })
    },
    // 添加
    async add(info) {
      await addHotel({ ...info })
      this.$message.success({
        message: '添加成功',
        duration: 1000
      })
      this.$router.push({
        path: '/merchandise/combo/other'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-second-wrap {
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1500;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  .item-container{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .title{
      font-size: 14px;
      line-height: 30px;
      width: 100px;
    }
    .title-right{
      margin-left: 40px;
    }
    .management-btn{
      margin-left: 15px;
    }
    .input-container{
      width: 400px;
    }
    .textarea-container{
      width: 40%;
    }
    .window {
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    .item-left,.item-right{
      display: flex;
      align-items: center;
      p {
        margin-left: 10px;
      }
    }
    .add-btn {
      width: 200px;
    }
  }
  .right{
    justify-content: flex-end;
  }
  .title-wrap{
    width: 100%;
    display: flex;
  }
  .title-wrap1{
    margin-right: 20px;
    display: flex;
  }
  .item-container-other {
    padding-left: 100px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .drink{
    width: 100%;
    display: flex;
    margin-bottom: 10px;
  }
  .timer {
    margin-left: 100px;
    flex-wrap: wrap;
    .timer-item {
      margin-bottom: 10px;
      margin-right: 20px;
    }
  }
  .cursor {
    cursor: pointer;
  }
  .tab-content{
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
</style>
